<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">

<link rel="import" href="tutorials-app-logo.html">

<dom-module id="tutorials-app-header">
  <template>
    <style>

      :host {
        @apply --header-size;

        --header-size: {
          height: 48px;
          width: 100%;
        }
      }

      app-header {
        background-color: var(--app-primary-color);
        color: white;
        padding: 0;

        @apply --header-size;
      }

      app-header-layout {
        z-index: 9999;

        @apply --header-size;
      }

      app-toolbar {
        margin: 0 auto;
        max-width: 984px;
        padding: 0;

        @apply --header-size;
      }

      .app-logo {
        margin-left: 10px;
      }

      @media only screen and (max-width: 984px) {
        .app-logo {
          margin-left: 20px;
        }
      }

      .app-logo a {
        color: #fff;
        text-decoration: none;
      }

      paper-input {
        --paper-input-container-focus-color: white;
        --paper-input-container-input-color: white;
      }
    </style>
    <app-header-layout fullbleed>
        <app-header fixed>
          <app-toolbar>
            <div class="app-logo">
              <a href="/">
                <tutorials-app-logo></tutorials-app-logo>
              </a>
            </div>
          </app-toolbar>
        </app-header>
    </app-header-layout>
  </template>

  <script>
    Polymer({
      is: 'tutorials-app-header',
    });
  </script>
</dom-module>
